import React, { memo } from 'react';

import {
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from './style';
import TopBanners from './c_components/TopBanners';
import JPHotRecommend from './c_components/JPHotRecommend';
import JPNewAlbum from './c_components/new_album';
import JPRanking from './c_components/recommend-ranking';

function JPRecommend(props) {
  return (
    <RecommendWrapper>
      <TopBanners />
      {/* left */}
      <Content className="wrap-v2">
        <RecommendLeft>
          <JPHotRecommend />
          <JPNewAlbum />
          <JPRanking />
        </RecommendLeft>

        {/* right */}
        <RecommendRight>2</RecommendRight>
      </Content>
    </RecommendWrapper>
  );
}

export default memo(JPRecommend);

// function JPRecommend(props) {
//   const { getBanners } = props;

//   useEffect(() => {
//     getBanners()
//   }, [getBanners]);

//   return <div>JPRecommend </div>;
// };

// const mapStateToProps = (state) => ({
//   topBanners: state.recommend.topBanners
// });

// const mapDispatchToProps =(dispath)=>({
//   getBanners:()=>{
//     dispath(getTopBannerAction)
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(JPRecommend));
